<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('接口用户列表')" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <input type="hidden" th:value="${inter.idInter}" id="idInter">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>接口名：</label>
                                <input type="text" name="loginName" th:value="${inter.na}" disabled/>
                            </li>
                            <li th:each="item:${params}" th:attr="value=${item}" name="param" >
                                <label>参数：</label>
                                <input type="text" placeholder="请输入生成业务名" class="input_param"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="queryTableData()"><i class="fa fa-search"></i>提数</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "system/outer";

        $(function() {
            var paramName;
            $.each($("li[name=param]"),function (index,item) {
                paramName = $(item).attr("value");
                $(item).find("input").attr("name",paramName).attr("placeholder",paramName);
            });
        });
        function queryTableData() {
            var idInter = $("#idInter").val();
            var paramEles = $("input.input_param");
            var param={"idInter":idInter};
            var sqlParams="{";
            var key,value;
            $.each(paramEles,function (index,item) {
                key = $(item).attr("name");
                value = $(item).val();
                sqlParams += "\""+key+"\":\""+value+"\",";
            });
            sqlParams=sqlParams.substring(0,sqlParams.length-1)+"}";
            debugger;
            param.param=eval('(' + sqlParams + ')'); ;
            $.ajax({
                url: '/system/base/inter/preview',
                type: 'post',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify(param),
                success: function (result) {
                    if(result.code==0) {
                        debugger;
                        var data = result.data;
                        var mycolumns=[];
                        if(data.length<1) {
                            return ;
                        }
                        $.each(data[0],function (index,item) {
                            mycolumns.push({
                                field: index,
                                title: index
                            });
                        });
                        var options = {
                            showSearch: false,
                            showRefresh: false,
                            showToggle: false,
                            showColumns: false,
                            showExport: false,
                            pagination: false,
                            columns: mycolumns,
                            data:data
                        };
                        $.table.destroy();
                        $.table.init(options);
                    }
                }
            });
        };
    </script>
</body>
</html>